<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 核心依赖 -->
    <script src="https://unpkg.com/codemirror@5.65.2/lib/codemirror.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.2/lib/codemirror.css" />
    <!-- 代码模式 -->
    <script src="https://unpkg.com/codemirror@5.65.2/mode/xml/xml.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/mode/css/css.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/mode/javascript/javascript.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/mode/htmlmixed/htmlmixed.js"></script>
    <!-- 主题 -->
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.2/theme/darcula.css" />
    <!--全屏模式-->
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.2/addon/display/fullscreen.css" />
    <script src="https://unpkg.com/codemirror@5.65.2/addon/display/fullscreen.js"></script>
    <!-- 括号匹配 -->
    <script src="https://unpkg.com/codemirror@5.65.2/addon/edit/matchbrackets.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/edit/closebrackets.js"></script>
    <!-- 自动补全 -->
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.2/addon/hint/show-hint.css" />
    <script src="https://unpkg.com/codemirror@5.65.2/addon/hint/show-hint.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/hint/anyword-hint.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/hint/css-hint.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/hint/javascript-hint.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/hint/xml-hint.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/hint/html-hint.js"></script>
    <!-- 支持代码折叠 -->
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.2/addon/fold/foldgutter.css" />
    <script src="https://unpkg.com/codemirror@5.65.2/addon/fold/foldcode.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/fold/foldgutter.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/fold/brace-fold.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/fold/comment-fold.js"></script>
    <!-- 滚动条 -->
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.2/addon/scroll/simplescrollbars.css" />
    <script src="https://unpkg.com/codemirror@5.65.2/addon/scroll/simplescrollbars.js"></script>
    <!-- 代码错误校验 -->
    <link rel="stylesheet" href="https://unpkg.com/codemirror@5.65.2/addon/lint/lint.css" />
    <script src="https://unpkg.com/codemirror@5.65.2/addon/lint/lint.js"></script>
    <script src="https://unpkg.com/jshint@2.13.4/dist/jshint.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/lint/javascript-lint.js"></script>
    <script src="https://unpkg.com/csslint@1.0.5/dist/csslint.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/lint/css-lint.js"></script>
    <script src="https://unpkg.com/htmlhint@1.1.4/dist/htmlhint.js"></script>
    <script src="https://unpkg.com/codemirror@5.65.2/addon/lint/html-lint.js"></script>
    <!-- 代码格式化 -->
    <script src="https://unpkg.com/prettier@2.5.1/standalone.js"></script>
    <script src="https://unpkg.com/prettier@2.5.1/parser-postcss.js"></script>
    <script src="https://unpkg.com/prettier@2.5.1/parser-babel.js"></script>
    <script src="https://unpkg.com/prettier@2.5.1/parser-html.js"></script>
    <script src="https://unpkg.com/prettier@2.5.1/parser-espree.js"></script>
    <!-- vue-element-ui -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css" />
    <title>codemirror</title>
    <style>
      #result {
        width: 100%;
        height: 400px;
        padding: 10px;
        margin-top: 20px;
        border-radius: 4px;
        box-sizing: border-box;
        overflow: hidden;
        border: 1px solid #ebeef5;
        background-color: #fff;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      }
      .code_max {
        display: flex;
      }
      .code_item {
        flex-basis: auto;
        flex-grow: 1;
        margin: 0 4px;
        transition: 0.2s;
      }
      .code_item.is_collapse {
        flex-grow: 0;
        flex-basis: 50px;
        transition: 0.2s;
      }
      .mode_title {
        padding: 4px 0;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <p>
      相关文章参考：
      <a href="https://zhuanlan.zhihu.com/p/22163474/" target="_blank">基本配置</a>
      <a href="https://codemirror.net/5/mode/clike/index.html" target="_blank">官方配置</a>
      <a href="https://blog.gavinzh.com/2020/12/13/codemirror-getting-started/" target="_blank">智能提示-1</a>
      <a href="https://blog.csdn.net/qq_37334150/article/details/109067869" target="_blank">智能提示-2</a>
      <br />
      <a href="https://pintia.cn/problem-sets/1526027869896364032/exam/problems/1526054752159584256" target="_blank">
        其他实现的网站
      </a>
    </p>
    <div id="app">
      <el-button type="primary" @click="previewHandle">预览</el-button>
      <el-select v-model="temp" placeholder="请选择模板" @change="templateChange">
        <el-option v-for="item in codeTemplateList" :key="item.name" :label="item.name" :value="item.name"></el-option>
      </el-select>
      <div class="code_max">
        <div v-for="item in modeList" :key="item.name" :class="['code_item', { is_collapse: item.isCollapse } ]">
          <div class="mode_title" @click="item.isCollapse = !item.isCollapse">{{ item.name }}</div>
          <textarea hidden :id="item.name"></textarea>
        </div>
      </div>
      <div id="result"></div>
    </div>

    <script type="module" src="./224-main.js"></script>
  </body>
</html>
